<template>
  <div class="wrapper">
    <div style="margin: 200px auto;background-color: #fff;width: 350px;height: 300px;padding: 20px;border-radius: 10px">
      <div style="margin: 20px 0;text-align: center;font-size: 24px"><b>登 录</b></div>
      <el-form :rules="rules" :model="user" ref="userForm">
        <el-form-item prop="username">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password
                    v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item style="margin: 10px 0;text-align: right">
          <el-button type="primary" size="small" autocomplete="off" @click="login('userForm')">登 录</el-button>
          <el-button type="warning" size="small" autocomplete="off" @click="resetForm('userForm')">重  置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import user from "@/views/User";
import {setRoutes} from "@/router";

export default {
  name: "Login",
  data() {
    return {
      user: {
        username: "admin",
        password: "admin"
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
      }
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.request.post("/login", this.user)
              .then(res => {
                if (res.code === 1000) {
                  this.$message.success("登录成功")
                  localStorage.setItem("user",JSON.stringify(res.data))   // 存储信息到浏览器
                  localStorage.setItem("menus",JSON.stringify(res.data.menus))
                  // 动态设置当前用户的路由
                  setRoutes()
                  this.$router.push("/index")
                } else {
                  this.$message.error(res.data)
                }
              })
        }else {
          this.$message.error("请输入正确格式的用户名和密码")
          this.resetForm(formName)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style>

.wrapper {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #FC466B, #3F5EFB);
  overflow: hidden;
}

</style>